<!DOCTYPE html>
<html lang="en">
<head th:include="certificateWeb/headFoot :: headerCss">
</head>

<!--<link rel="stylesheet" href="/css/certificateWeb/onLineApply/onLineApply.css">-->
<link rel="stylesheet" href="/css/certificateWeb/workNews/workNews.css">
<body id="body">
<div th:include="certificateWeb/headFoot :: header"></div>
<main id="main" style="background: #fff">
    <section class="sec_1">
        <div class="div_3" style="position: relative;margin:80px auto 60px 40px;width: 1120px;">
            <img style="width: 1100px" src="/img/step2.png"/>
            <span class="step1 this1">申报条件</span>
            <span class="step2 this1">填报信息</span>
            <span class="step3">信息审核</span>
            <span class="step4">在线缴费</span>
            <span class="step5">报名成功</span>
        </div>
        <!--<div class="form-control div_1">-->
        <!--<ul>-->
        <!--<li class="this"><a href="#">填报信息</a></li>-->
        <!--<li><a id="applyExam">信息审核</a></li>-->
        <!--<li><a id="onLinePay">在线缴费</a></li>-->
        <!--<li><a id="applySuccess">报名成功</a></li>-->
        <!--</ul>-->
        <!--</div>-->
        <div class="form-control div_2" style="width: 1200px;">
            <label style=" font-size: 18px; margin-right: 25px; font-weight: bold">填报信息</label>
            <hr/>
            <form id="formId">
                <span class="wd160" style="font-size: 14px">注意：①寸照请上传尺寸为295像素*413像素并且小于1M的照片</span>
                <span class="wd160" style="font-size: 14px">②如要修改已有的个人信息请到个人资料修改，<a
                        style="border:1px solid #ff751a ;padding: 2px 4px;color:#ff751a"
                        href="/certificate/editMy">去修改</a></span>
                <div id="userDetail"></div>
                <div class="div_input" style="margin-top: 50px">
                    <label class="span_input" style="margin-top:20px">考试院校<span style="color: #D52525">*</span>：</label>
<!--                    <select name="orgId" id="orgId" class="form-control inp_1"></select>-->
                    <input name="orgId" id="orgId" placeholder="请选择院校" class="form-control inp_1"/>
                </div>
                <input type="hidden" th:value="${chatchId}" name="cbatchId" id="chatchId"/>
                <div style="clear: both"></div>
                <div class="div_3">
                    <button class="form-control but_1" type="submit" id="send">提交</button>
                </div>
            </form>
        </div>
        <div style="clear: both"></div>
    </section>
</main>
<div th:include="certificateWeb/headFoot :: footer"></div>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>

</body>
<script>

    function selOrg() {
        $.ajax({
            url: "/jzApi/certificates/selCerOrgS",
            data:{cbatchId: $("#chatchId").val(),name:''},
            success: function (res) {
                $('#orgId').selectPage({
                    showField: 'name',
                    keyField: 'id',
                    data: res.data,
                    multiple: false,
                    searchField: 'name'
                });
            }
        });
    }


    $(function () {
        selOrg();
        validateRule();
        //查询考点信息
        // selCerOrgS();
        //查询报名记录
        selCertificateFill();
        //查询用户信息
        selUserDetail()
    });

    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });

    function selUserDetail() {
        ajaxToken("/jzApi/user/selUserDetail", "GET", {}, function (res) {
            var res = JSON.stringify(res);
            res = res.replace(/null/g, '""');
            res = JSON.parse(res);
            var a = '<div style="text-align:center">' +
                '                    <img id="test" src="' + res.headPortrait + '"/>' +
                '                </div>' +
                '                <div class="div_input">' +
                '                    <label class="span_input">寸照<span style="color: #D52525">*</span>：</label>' +
                '                    <input style="opacity:0;width: 1px;" value="' + res.headPortrait + '" id="photo" name="photo">' +
                '                    <button type="button" class="btn inp_1" style="margin-top: 45px" id="btnUpload">' +
                '                        <i class="fa fa-cloud"></i>上传寸照' +
                '                    </button>' +
                '                </div>' +
                '                <div class="div_input">' +
                '                    <label class="span_input">考生姓名<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="name" name="name" value="' + res.name + '" placeholder="考生姓名"' +
                '                           class="form-control inp_1">' +
                '                </div>' +
                '                <div class="div_input">' +
                '                    <label class="span_input">身份证<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="idNumber" name="idNumber" value="' + res.idNumber + '" placeholder="身份证"' +
                '                           class="form-control inp_1">' +
                '                </div>'+
                '                <div class="div_input">' +
                '                    <label class="span_input">考生类型<span style="color: #D52525">*</span>：</label>' +
                '                    <select name="type" class="form-control inp_1">' +
                '                       <option value="">请选择类型</option>'+
                '                       <option value="0">在校考生</option>'+
                '                       <option value="1">社会考生</option>'+
                '                    </select>' +
                '                </div>';
            $("#userDetail").html(a);


            if ($("#test").attr("src") != '') {
                $("#test").css({"width": "147px", "height": "206px", 'margin-top': '20px'});
            }
            var name = $("#name").val();
            var idNumber = $("#idNumber").val();
            var schoolName = $("#schoolName").val();
            if (name != "") {
                $("#name").attr("readonly", true);
            }
            if (idNumber != "") {
                $("#idNumber").attr("readonly", true);
            }
            if (schoolName != "") {
                $("#schoolName").attr("readonly", true);
            }

            layui.use('upload', function () {
                var upload = layui.upload;
                //执行实例
                upload.render({
                    elem: '#btnUpload', //绑定元素
                    url: '/jzApi/utils/fileImprot', //上传接口
                    size: 1000,
                    auto: false,
                    accept: 'images',
                    exts: 'jpg|png|jpeg',
                    choose: function (obj) {  //上传前选择回调方法
                        obj.preview(function (index, file, result) {
                            var flag = true;
                            // console.log(file);            //file表示文件信息，result表示文件src地址
                            var img = new Image();
                            img.src = result;
                            img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                                if (img.width == 295 && img.height == 413) {
                                    obj.upload(index, file); //满足条件调用上传方法
                                } else {
                                    flag = false;
                                    layer.msg("上传的图片必须是295像素*413像素的寸照！");
                                    return false;
                                }
                            };
                            return flag;
                        });
                    },
                    done: function (r) {
                        $("#photo").val(r.data);
                        $("#test").attr("src", r.data);
                        $("#test").css({"width": "147px", "height": "206px", 'margin-top': '20px'});
                    },
                    error: function (r) {
                        layer.msg(r.msg);
                    }
                });
            });
        });
    }

    /*function selCerOrgS() {
        $.ajax({
            url: '/jzApi/certificates/selCerOrgS',
            data: {cbatchId: $("#chatchId").val()},
            success: function (r) {
                if (r.code == 0) {
                    var list = r.data;
                    var opt = '<option value="">请选择机构</option>';
                    for (var i = 0; i < list.length; i++) {
                        opt += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
                    }
                    $("#orgId").html(opt);
                } else {
                    layer.msg(r.msg);
                }
            }
        })
    }*/

    var chatchId = $("#chatchId").val();

    function selCertificateFill() {
        layui.use('layer', function () {
            var layer = layui.layer;
            ajaxToken("/jzApi/certificates/selCertificateFill", "GET", {
                chatchId: chatchId
            }, function (res) {
                if (res != null) {
                    if (res.state == 0 || res.state == 2) { //0待审核2未通过，跳转信息审核页面
                        layer.confirm("已经报名，查看进度", {
                            btn: ['查看', '取消']
                        }, function (index, layero) {
                            location.href = '/certificate/applyExam?signId=' + res.id + '&chatchId=' + chatchId
                        }, function (index) {

                        })
                    }
                    if (res.state == 1) {  //3待缴费，跳转支付页面

                        layer.confirm("已经报名，查看进度", {
                            btn: ['查看', '取消']
                        }, function (index, layero) {
                            location.href = '/certificate/onLinePay?signId=' + res.id
                        }, function (index) {
                        })
                    }
                    if (res.state == 4 || res.state == 3) { //4已缴费，跳转已完成页面
                        layer.confirm("已经报名，查看进度", {
                            btn: ['查看', '取消']
                        }, function (index, layero) {
                            location.href = '/certificate/applySuccess?signId=' + res.id + '&chatchId=' + chatchId
                        }, function (index) {

                        })
                    }
                }
            });
        });
    }


    //提交报名信息
    function save() {
        if($("#orgId").val() ==''){
            layer.msg("请选择考试院校");
            return false
        }
        if(!cardId().checkIdCardNo($('#idNumber').val())) {
            layer.msg('请输入正确的身份证号');
            return false;
        }
        ajaxTokenForm("/jzApi/certificates/addCertificateFill", "POST", $('#formId').serialize(), function (res) {
            // if (res.code == "40013" || res.code == 40013) {
            //     layer.confirm("已经报名，去个人中心查看记录", {
            //         btn: ['查看', '取消']
            //     }, function (index, layero) {
            //         location.href = "/certificate/findApplyExam"
            //     })
            // }
            // if (res.code == "0" || res.code == 0) {
            //     location.href = '/certificate/applyExam?signId=' + res.data + '&chatchId=' + chatchId;
            // }
            console.log("res",res);
            layer.confirm("报名成功，去个人中心查看记录", {
                btn: ['查看', '取消']
            }, function (index, layero) {
                location.href = "/certificate/findApplyExam"
            })

        })
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#formId").validate({
            rules: {
                photo: {
                    required: true
                },
                name: {
                    required: true
                },
                idNumber: {
                    required: true,
                },
                type:{
                    required: true
                },
                orgId: {
                    required: true
                }
            },
            messages: {
                photo: {
                    required: icon + "请上传寸照"
                },
                name: {
                    required: icon + "请填写姓名"
                },
                idNumber: {
                    required: icon + "请填写身份证号码"
                },
                type:{
                    required: icon + "请选择考生类型"
                },
                orgId: {
                    required: icon + "请选择考试院校"
                }

            }
        })
    }
</script>

</html>